<template>
	<page :name="name" :padding="true" ref="pageRef" :questionDialogButtons="questionDialogFooterButtons" :isOpenDefaultDialog="isOpenDefaultDialog" :questionDialogContent="questionDialogContent" :dialogContent="dialogContent" :dialogButtons="dialogFooterButtons" :dialogGoUri="dialogGoUri">
		<el-row type="flex" justify="center" slot="main">
			<video-player :url="video['url']" :onEnd="openDialog" ref="playerRef"></video-player>
		</el-row>
		<div slot="question-dialog-footer">
			<slot name="questions"></slot>
		</div>
	</page>
</template>

<script>
import data from '~/data/videos.js'
import store from '~/utils/store'
export default {
	props: {
		name: {
			type: String,
			required: true
		},
		dialogGoUri: {
			type: String,
		},	
		dialogContent: {
			type: String
		},
		dialogButtons: {
			type: Array,
			default: () => {
				return []
			}
		},
		questionDialogButtons: {
			type: Array,
			default: () => {
				return []
			}
		},
		questionDialogContent: {
			type: String,
			default: '请作答以下题目'
		},
		isOpenDefaultDialog: {
			type: Boolean,
			default: true
		},		
	},	
	data: function() {
		return {
			video: data[this.name]
		}
	},
	computed: {
		playBackButton() {
			return {
				type: '',
				text: '重新播放',
				click: (callback) => {
					callback()
					this.player.playBack()
				}
			}
		},
		dialogFooterButtons() {
			return this.dialogButtons.concat([
				this.playBackButton
			])
		},
		questionDialogFooterButtons() {
			return this.questionDialogButtons.concat([
				this.playBackButton
			])
		},
		page() {
			return this.$refs.pageRef
		},
		player() {
			return this.$refs.playerRef
		}	
	},
	methods: {
		openDialog(finished = false) {
			if (finished)
				store.addItemTimes(`v_${this.name}`)
			this.page.openDefaultDialog()
		}
	}
};
</script>
